<template>
    <div>
         <!-- <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div> -->
        <ve-pie :data="chartData" :extend="pieExtend"></ve-pie>
        <ve-map :data="mapData" :extend="mapExtend"></ve-map>
    </div>
</template>

<script>
import {GetStatApi} from '@/request/api'
export default {
    data () {
        return {
                chartData:{},
                mapData:{},
                //用echarts的配置在v-charts使用
                pieExtend:{
                    legend:{
                        top:10,
                        right:20,
                        width:300,
                        height:100,
                        orient:"vertical"
                    },
                   series:{
                       type:"pie",
                       radius:['30%','55%'],//设置半径
                       center:['20%','50%']//圆心坐标
                   }
                },

                chartData:{
                    columns:['位置','税收','人口','面积'],
                    rows:[
                        {'位置':'吉林','税收':123,'人口':123,'面积':92134},
                        {'位置':'北京','税收':1123,'人口':2123,'面积':29234},
                        {'位置':'上海','税收':2123,'人口':1243,'面积':94234},
                        {'位置':'浙江','税收':4123,'人口':5123,'面积':29234}
                    ]
                },
                mapExtend:{
                    legend:{show:false},//隐藏图列组件
                    tooltip:{
                        formatter:'{b}<br />销量:{c}'
                    },
                    visualMap:{
                        type:'continuous',
                        min:0,
                        max:100000,
                        calculable:true,
                        inRange:{
                           color:["#121122","rgba(3,4,5,0.4)"]
                        }
                    },
                    series:{
                          type:"map",
                        aspectScale:0.85,
                        zoom:1.2,
                        showLegendSymbol:false,
                        label:{
                            show:false
                        },
                        emphasis:{
                         label:{
                             show:false
                         },
                         itemStyle:{
                             areaColor:"rgb(136,132,216)",
                         }
                        },
                        itemStyle:{
                           borderColor:"#fff",
                        }
                    }
                }
        }
    },
    created(){
        GetStatApi().then((res)=>{
            if(res.errno===0){
                this.chartData={
                columns:["name","today_money"],
                rows:res.data.salePie
                };
                this.mapData={
                    columns:["areaName","saleNum"],
                    rows:res.data.saleMap
                }
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
    
</style>